<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<button class="btn">发送请求</button>

<script>
let btn = document.querySelector('.btn')

btn.onclick = function (){
    // ajax('post','http://localhost:8080/users/login','user=jingjing&pass=222222',function (result){
    //     let json = JSON.parse(result)// 解析成json对象
    //     // 登录结果反馈给用户
    //     alert(json.msg)
    //     // 判断是否登录成功
    //     if (json.code == 1) {
    //         // 登录成功，跳转到百度首页
    //         location.href = 'https://www.baidu.com/'
    //     }
    // },function (err){
    //     console.log( '请求失败',err )
    // })

    ajax('get','http://localhost:8080/users/list','a=1&b=2',function (res){
        console.log( res )
    },function (err){
        console.log( err )
    })
}

function ajax(type,url,data,success,error){
    // 1.创建一个数据交互对象
    let xhr = new XMLHttpRequest()

    // 判断请求方式
    if (type.toLowerCase() === 'get') {
        // 2.初始化请求（设置请求地址、请求方式等）
        xhr.open(type,url+'?'+data+'&_='+Date.now(),true)

        // 3.将请求发送到服务端
        xhr.send(null)
    }
    else if (type.toLowerCase() === 'post'){
        // 2.初始化请求（设置请求地址、请求方式等）
        xhr.open(type,url)

        // 3.设置请求头（告诉服务端发送的数据格式）
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

        // 4.将请求发送到服务端
        xhr.send(data)
    }
    else{
        alert('亲，目前只支持get和post请求')
        return
    }

    // 5.等待 请求 状态改变
    xhr.onreadystatechange = function (){
        if (xhr.readyState === 4) {// 请求完成
            if (xhr.status >= 200 && xhr.status < 300) {
                success(xhr.responseText)// 执行成功的回调
                // console.log( xhr.responseText )// 服务端响应的数据（字符串）
                // let json = JSON.parse(xhr.responseText)// 解析成json对象
                // // 登录结果反馈给用户
                // alert(json.msg)
                // // 判断是否登录成功
                // if (json.code == 1) {
                //     // 登录成功，跳转到百度首页
                //     location.href = 'https://www.baidu.com/'
                // }
            } else {
                error(xhr.status)// 执行失败的回调
                // console.log( '请求失败',xhr.status )
            }
        }
    }
}

</script>
</body>
</html>